<template>
  <div class="map">
    <div class="where">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <img src="../../public/img/ia_100000000.png" alt="" />
      <span><input type="text" v-model="center" /></span>
    </div>

    <div id="map">
      <baidu-map
        class="map"
        :center="center"
        :zoom="zoom"
        ak="MQ5ocakBEEabCe4zAq7cZPDwHe39PqDb"
      >
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      </baidu-map>
    </div>

    <div class="store_list">
      <div class="store" v-for="(item,index) in sightslist" :key="index">
        <div class="name">{{item.name}}</div>
        <div class="distance">距离您{{item.distance}}km</div>
        <div class="address">{{item.address}}</div>
        <div class="buttons">
          <img src="../../public/img/telephone.png" alt="" />
          <img src="../../public/img/guide.png" alt="" @click="goto(index)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation.vue";

export default {
  components: {
    BaiduMap,
    BmNavigation,
  },
  data() {
    return {
      center: "上海",
      place:'上海',
      zoom: 12,
      sightslist: [
        {
          name: "快乐家园营业部",
          distance: 1186.2,
          address: "金光路219号南楼106A",
        },
        {
          name: "扬子江大酒店营业部",
          distance: 1194.4,
          address: "延安西路2099号上海扬子江万丽酒店2楼",
        },
        {
          name: "昌里路营业部",
          distance: 1198.2,
          address: "昌里路134号",
        },
        {
          name: "长乐路营业部",
          distance: 1199.3,
          address: "长乐路191号",
        },
        {
          name: "国旅大厦营业部",
          distance: 1199.4,
          address: "北京西路1277号底楼",
        }
      ],
    };
  },
  methods: {
    location() {
      if ("geolocation" in navigator) {
        window.navigator.geolocation.getCurrentPosition(function (data) {
          console.log(data);
        //   console.log(data.coords);
        });
      } else {
        alert("不支持物理定位");
      }
    },
    goto(index){
        // console.log(index);
        this.center = this.place +=this.sightslist[index].name
        this.place = "上海"
        
    },
    back() {
      this.$router.back();
    },
  },
  created() {
    this.location();
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  min-height: 100%;
  background-color: #f7f5f6;

  .store_list {
    padding: 20px 0;
    .store {
      width: 344.5px;
      box-shadow: 0 1.5px 9px rgb(176 176 176 / 50%);
      border-radius: 3px;
      margin: 0 auto;
      border-top: 0.1px solid transparent;
      position: relative;
      line-height: 1.1;
      background-color: #fff;
      position: relative;
      padding-bottom: 15px;
      margin-bottom: 9px;
      .buttons {
        position: absolute;
        top: 21px;
        right: 0;
        width: 85px;
        border-left: solid #e0e0e0 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 24px;
          height: 24px;
          &:nth-child(1) {
            margin-bottom: 15px;
          }
        }
      }
      .address {
        margin-top: 15px;
        font-size: 14px;
        width: 224px;
        color: #999;
        margin-left: 20px;
      }
      .distance {
        font-size: 14px;
        color: #333;
        margin-left: 20px;
        margin-top: 12px;
      }
      .name {
        margin-left: 20px;
        margin-top: 20px;
        font-weight: bold;
        font-size: 17px;
        color: #333;
      }
    }
  }

  #map {
    width: 100%;
    height: 250px;
    background-color: rgb(136, 136, 136);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
  }
  .where {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: #80d7d1;
    i {
      margin-left: 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      margin-left: 6.5px;
      input {
        height: 100%;
        width: 100%;
        border: none;
        border-radius: 25px;
      }
    }
    img {
      width: 15px;
      height: 17px;
      margin-left: 5px;
    }
  }
}
</style>